<!-- src/components/LeafletMap.vue -->
<template>
  <div class="map-container" id="mapContainer" />
</template>

<script setup>
import { onMounted } from 'vue'
// 导入leaflet和样式
import L from 'leaflet';
import 'leaflet/dist/leaflet.css'
// 导入leaflet.pm和样式
import 'leaflet.pm';
import 'leaflet.pm/dist/leaflet.pm.css'

// 导入leaflet-search
import 'leaflet-search'
import 'leaflet-search/dist/leaflet-search.min.css'

// 导入leaflet-control-geocoder和样式
import 'leaflet-control-geocoder/dist/Control.Geocoder.css'
import 'leaflet-control-geocoder'

const initMap = () => {
  const map = L.map('mapContainer', {
    center: [30.592262488093155, 114.30601709340294],
    zoom: 13,
    minZoom: 5,
    maxZoom: 18,
    zoomControl: true,
    attributionControl: false, //去掉右下角logo
  })

  // #1 标记功能
  let markerIcon = L.icon({
    iconUrl: "https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon.png",
    iconSize: [20, 30],
  });


  // let marker
  let marker = L.marker([30.59308444388947, 114.30539488792421], { icon: markerIcon })
    .addTo(map)
    .bindPopup("市政府")
    .openPopup()
  // .remove()

  //--------------------------------
  marker.bindTooltip('我是标记', { //添加提示文字
    permanent: false, //是永久打开还是悬停打开
    direction: 'top' //方向
  }).openTooltip() //在图层打开


  // #2 地图底层数据
  const baseLayer = {
    '高德地图': L.tileLayer(
      "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
      { attribution: "高德" }
    ).addTo(map),
    'ArcGIS卫星影像': L.tileLayer("https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png",
      { attribution: "ArcGIS卫星影像" }
    ),
    '天地图影像图': L.tileLayer(
      "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d",
    ),
    '天地图街道图': L.tileLayer(
      "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d",
    ),

  }

  // 地图底层控制
  L.control.layers(
    baseLayer, {}, {
    position: 'topright'
  }
  ).addTo(map)

  // #3.点击事件 
  map.on('click', function (e) {
    // console.log(e.latlng.lat, e.latlng.lng)
    L.marker([e.latlng.lat, e.latlng.lng], { icon: markerIcon })
      .addTo(map)
      .bindPopup("新增标记点")
      .openPopup()
  })

  // #4 添加绘制工具功能
  map.pm.setLang('zh')
  map.pm.addControls({
    position: "topleft",
    drawPolygon: true, //绘制多边形
    drawMarker: false, //绘制标记点
    drawCircleMarker: false, //绘制圆形标记
    drawPolyline: true, //绘制线条
    drawRectangle: false, //绘制矩形
    drawCircle: false, //绘制圆圈
    editMode: true, //编辑多边形
    dragMode: true, //拖动多边形
    cutPolygon: true, //添加⼀个按钮以删除多边形⾥⾯的部分内容
    removalMode: true, //清除多边形
  })
  // 全局绘制样式
  map.pm.setPathOptions({
    color: "orange",
    fillColor: "green",
    fillOpacity: 0.4,
  })
  // 或者单独设置绘制样式
  let options = {
    templineStyle: {
      color: "red",
    },
    // 提⽰线从最后⼀个标记到⿏标光标的线虚线
    hintlineStyle: {
      color: "red",
      dashArray: [5, 5],
    },
    pathOptions: {
      color: "orange",
      fillColor: "green",
    },
  }
  // 激活绘制多边形功能、绘制多边形时的样式
  map.pm.enableDraw("Polygon", options)
  // 启用绘制--多边形功能
  map.pm.enableDraw("Polygon", {
    snappable: true, //启⽤捕捉到其他绘制图形的顶点
    snapDistance: 20, //顶点捕捉距离
  })
  // 关闭绘制--注意也可以关闭其他模式的绘制功能
  map.pm.disableDraw("Polygon")
  // 绘制事件监听
  map.on("pm:drawstart", (e) => {
    console.log(e, "绘制开始第一个点")
  })
  map.on("pm:drawend", (e) => {
    console.log(e, "禁⽌绘制、绘制结束")
  })
  map.on("pm:create", (e) => {
    console.log(e, "绘制完成时调⽤")
    if (e.shape == "Circle") {
      console.log(e.layer._latlng, e.layer._radius, "绘制坐标")
    } else {
      console.log(e.layer._latlngs[0], "绘制坐标")
    }
  })
  map.on("pm:globalremovalmodetoggled", (e) => {
    console.log(e, "清除图层时调用");
  })

  // #5 搜索功能 
  const searchLayer = L.layerGroup().addTo(map)
  map.addControl(new L.Control.Search({
    layer: searchLayer,
    url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
    jsonpParam: 'json_callback',
    propertyName: 'display_name',
    propertyLoc: ['lat', 'lon'],
    marker: false,
    autoType: true,
    autoCollapse: true,
    minLength: 2
  }))

  // 配置布局
  L.tileLayer("https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}", { attribution: "&copy; <p>OpenStreetMap</p> contributors" }).addTo(map)
}


onMounted(() => {
  initMap()
})



</script>

<style>
.map-container {
  width: 100%;
  height: 100vh;
}
</style>
